<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件refs</title>
    <script src="../../vue2.js"></script>
    <script src="../../axios.js"></script>
</head>
<body>
<div id="box">
    <label>
        <input type="text" ref="mytext">
    </label>
    <div ref="divtext">12313156r241654</div>
    <button @click="handleAdd">add</button>

    <child ref="mychild"></child>
</div>
<script>
    Vue.component("child",{
        data(){
            return{
                myname:"hhl"
            }
        },
        template:`<div>
            child-{{ myname }}
        </div>`
    })

    new Vue({
        el: "#box",
        methods: {
            handleAdd() {
                //ref -> 绑定在DOM节点，拿到的就是 DOM对象
                //ref -> 绑定在组件，拿到的就是 组件对象

                // console.log(this.$refs.mytext.value, this.$refs.divtext)
                console.log(this.$refs.mychild.myname)
                this.$refs.mychild.myname = "newhhl"   //可以修改子组件的状态,容易引起数据流混乱
            }
        }
    })
</script>
</body>
</html>